<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{new Date | dateFormat}}</h3>
    </div>

    <script>
        // 全局的过滤器，进行时间的格式化
        Vue.filter('dateFormat', function (dateStr, pattern = "") {
            var dt = new Date(dateStr)

            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()

            // return y + '-' + m + '-' + d
            if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                return `${y}-${m}-${d}`
            } else {
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()

                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
        })

        //创建Vue实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            filters: { // 定义私有过滤器 过滤器有两个条件 【过滤器名称 和 处理函数】
                // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
                // 字符串的padStart 自动补齐
                dateFormat: function (dateStr, pattern = "") {
                    var dt = new Date(dateStr)

                    var y = dt.getFullYear()
                    var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                    var d = dt.getDate().toString().padStart(2, '0')

                    // return y + '-' + m + '-' + d
                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}年${m}月${d}日`
                    } else {
                        var hh = dt.getHours().toString().padStart(2, '0')
                        var mm = dt.getMinutes().toString().padStart(2, '0')
                        var ss = dt.getSeconds().toString().padStart(2, '0')

                        return `${y}年${m}月${d}日 ${hh}时${mm}分${ss}秒`
                    }
                }
            }
        });
    </script>
</body>

</html>